<!--  -->
<template>
<div class="Fullscreen-box">
    <div class="ui-dialog show" v-if="off">
        <div class="ui-dialog-cnt">
            <div class="ui-dialog-bd">
                <p>为了您更好的体验本程序，强烈建议您开启全屏！</p>
            </div>
            <div class="ui-dialog-ft">
                <button type="button" data-role="button" @click="cancel">取消</button>
                <button type="button" data-role="button" @click="openFullscreen">确定</button>
            </div>
        </div>
    </div>
    <div v-if="!off" class="Fullscreen"><p>即将进入...</p></div>
</div>

</template>

<script>
import { launchFullscreen } from '@/utils'

export default {
data() {
return {
    off:true
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    cancel(){
        this.$store.commit('changeShutFullscreen', true)
        // this.$router.push(this.$store.tourl)
        this.off = false;
        setTimeout(()=>{
                this.$router.push(this.$store.state.tourl)
            
        },1000)
    },
    openFullscreen(){
        launchFullscreen(document.documentElement)
        this.off = false;
        setTimeout(()=>{
            if(this.$store.state.tourl == ''){
                this.$router.push('/')
            }else{
                this.$router.push(this.$store.state.tourl)
            }
        },1000)

    }
}
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.Fullscreen-box{
    height: 100%;
}
.Fullscreen{
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
    p{
        vertical-align: middle;
        display:table-cell;
    }
}
</style>